<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <ui:composition template="layout.xhtml">
        <ui:define name="body">
            <script>
                function title() {
                    document.getElementById('paciente').className='selected';
                }
                window.onload=title;
            </script>
            <h:form  enctype="multipart/form-data">
                <h1 class="title">Paciente</h1>
                <div class="row">
                    <div class="twelve columns"> 
                        <p:panel style="background: none; border: none;" 
                                 styleClass="container_24 clearfix ">
                            <div class="grid_5">
                                <p:menu  >
                                    <p:submenu label="Menu">
                                        <p:menuitem url="createcustomer.xhtml" value="Cadastrar" icon="ui-icon-disk"/>
                                        <p:menuitem url="searchcustomer.xhtml" value="Pesquisar" icon="ui-icon-search"/>
                                    </p:submenu>

                                </p:menu>
                            </div>
                            <div class="grid_18">
                                #{managerIndex.proxAniversariante()}
                                <p:dataTable value="#{managerIndex.customers}" var="c" 
                                             rowIndexVar="rowid"
                                             rowKey="#{c.id}"
                                             rows="20" paginator="true"  
                                             paginatorPosition="bottom"
                                             emptyMessage="Nenhum aniversariante">
                                    <f:facet name="header">
                                        Aniversariantes do Mês
                                    </f:facet>
                                    <p:column headerText="#" width="20"
                                              style="#{managerIndex.aniversarioHoje(c) ? 'background-color:#F2DEDE; font-weight:bold;':''}">
                                        <p:button icon="ui-icon-search"  title="Visualizar dados do Paciente" alt="Visualizar dados do Paciente"
                                                  href="showcustomer.xhtml?customerShow=#{c.id}" 
                                                  style="width: 25px; position: relative"/>
                                    </p:column>
                                    <p:column headerText="Aniversariante"
                                              style="#{managerIndex.aniversarioHoje(c) ? 'background-color:#F2DEDE;font-weight:bold;':''}">
                                        #{c.name}
                                    </p:column>
                                    <p:column headerText="Dia"
                                              style="#{managerIndex.aniversarioHoje(c) ? 'background-color:#F2DEDE;font-weight:bold;':''}">
                                        <h:outputLabel value="#{c.dateBirth}" >
                                            <f:convertDateTime pattern="dd/MM" />
                                        </h:outputLabel>
                                    </p:column>
                                </p:dataTable>
                            </div>


                        </p:panel>
                    </div>
                </div>
            </h:form>
        </ui:define>
    </ui:composition>

</html>
